<template>
  <div class="container">
    <el-drawer v-model="drawer" size="80%">
      <template #header>
        <h2>详情</h2>
      </template>
      <template #default>
        <div>
          <el-descriptions :title="dataForm.code + '渠道统计'" border :column="2">
            <el-descriptions-item label="渠道名称">{{ dataForm.name }}</el-descriptions-item>
            <el-descriptions-item label="渠道码">{{ dataForm.code }}</el-descriptions-item>
            <el-descriptions-item label="状态"> <dict-label dict-type="yes_no" :dict-value="dataForm.openFlag" :status="{ 0: 'danger' }"></dict-label></el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ dataForm.createDate }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="content">
          <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
            <el-table-column prop="date" label="日期" header-align="center" align="center" width="120"></el-table-column>
            <el-table-column prop="code" label="渠道码" header-align="center" align="center"></el-table-column>
            <el-table-column prop="registerCount" label="注册人数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="bountyAmount" label="赠送金额" header-align="center" align="center"></el-table-column>
            <el-table-column prop="firstBuyCount" label="首次买币人数" header-align="center" align="center" width="120"></el-table-column>
            <el-table-column prop="buyCount" label="买入人数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="sellCount" label="卖出人数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="buyAmount" label="买入USDT" header-align="center" align="center"></el-table-column>
            <el-table-column prop="sellAmount" label="卖出USDT" header-align="center" align="center"></el-table-column>
            <el-table-column prop="sellFbAmount" label="卖出INR" header-align="center" align="center"></el-table-column>
            <el-table-column prop="dfFee" label="代付消耗USDT" header-align="center" align="center" width="120"></el-table-column>
<!--            <el-table-column label="代付费用" header-align="center" align="center">
              <template v-slot="scope">
                {{scope.row.dfFee - scope.row.sellAmount}}
              </template>
            </el-table-column>-->
            <el-table-column prop="earn" label="收益" header-align="center" align="center" width="120">
              <template #header>
                <el-tooltip class="box-item" effect="dark" content="收益 = 买入-代付消耗" placement="top-start">
                  <div style="display: flex; justify-content: center; align-items: center">
                    <span style="margin-right: 3px">收益</span> <el-icon><Warning /></el-icon>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <!--
                        <el-table-column prop="totalBalance" label="会员总余额" header-align="center" align="center"></el-table-column>
            -->
          </el-table>
          <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button type="primary" @click="confirmClick">Close</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import baseService from "@/service/baseService";
import useView from "@/hooks/useView";

const drawer = ref(false);

const dataForm = reactive({
  id: "",
  name: "",
  openFlag: 1,
  createDate: "",
  code: ""
});

const init = (row?: any) => {
  drawer.value = true;
  if (row.channelId) {
    getInfo(row.channelId);
  }
};

// 获取信息
const getInfo = (id: number) => {
  baseService.get("/member/memberpromochannel/" + id).then((res) => {
    Object.assign(dataForm, res.data);
    state.dataForm.code = dataForm.code;
    state.getDataList()
  });
};

const confirmClick = () => {
  drawer.value = false;
};

const view = reactive({
  getDataListURL: "/report/reportdatecodedata/page",
  getDataListIsPage: true,
  exportURL: "/report/reportdatecodedata/export",
  deleteURL: "/report/reportdatecodedata",
  deleteIsBatch: true,
  createdIsNeed: false,
  dataForm: {
    code: ""
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

defineExpose({
  init
});
</script>

<style lang="scss" scoped>
.container :deep(.el-drawer__header) {
  margin-bottom: 0;
}
.content {
  margin-top: 10px;
}
</style>
